<html lang="en">
<head>
	<!-- <script type="text/javascript" src="js/run-prettify.js"></script> -->
	<link rel="stylesheet" type="text/css" href="css/prettify.css" />
	<link rel="stylesheet" type="text/css" href="css/impress.css" />
	<script type="text/javascript" src="js/prettify.js"></script>
</head>
<body class="impress-not-supported" onload="prettyPrint()">

	<div id="impress">
		
		<div id="start" class="step" >
			<p class="headline">Objektorentierte Programmierung </br>
			in Javascript. </br>
			Der Blick ins Innere</p>
			&emsp;</br>
			<p class='footer'>Slide 1 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>

		<div id="slide1" class="step" data-x="-1800">
			<p class="headline">Motivation & Ziel</p>
			&emsp;</br>
			<p class='footer'>Slide 2 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide2" class="step" data-x="1800">
			<p class='headline'>Inhalt</p>
			1. Objekt</br>
			&emsp;</br>
			2. Konstruktorfunktion</br>
			&emsp;</br>
			3. Prototyp</br>
			&emsp;</br>
			<p class='footer'>Slide 3 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide3" class="step" data-x="3600" data-rotate="90">
			<p class="head">1. Objekt</p>
			1. Festimplementierte Objekte</br>
			&emsp;</br>
			2. Direkt erzeugte Objekte</br>
			&emsp;</br>
			3. Objekt-Literale</br>
			&emsp;</br>
			<p class='footer'>Slide 4 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide4" class="step" data-x="5400">
			<p class="head">1. Objekt</p>
			<p class= "headline">Festimplementierte Objekte</p>
			1. Object</br>
			&emsp;</br>
			2. String, Array, Number ...</br>
			&emsp;</br>
			3. window, document, form ...</br>
			&nbsp;</br>
			<p class='footer'>Slide 5 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide5" class="step" data-x="8200">
			<p class="head">1. Objekt</p>
			<p class= "headline">Direkt erzeugte Objekten</p>
			<pre class="prettyprint lang-javascript">
var obj = new Object();

obj.eigenschaft = "Property";

obj.methode = function(){
	console.log("Methode");
};
console.log(obj.eigenschaft); //Property
obj.methode(); //Methode
			</pre>
			<p class='footer'>Slide 6 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
			</br>
			</br>
		</div>



		<!--<div id="slide6" class="step" data-x="10000">
			<p class="head">1. Objekt</p>
			<p class= "headline">Zugriff</p>
			<pre class="prettyprint lang-javascript">
console.log(obj.eigenschaft); //Property
obj.methode(); //Methode
console.log(obj.prototype);//undefine
obj.constructor.a = "a";
console.log(Object.a);//a

			</pre>
			<p class='footer'>Slide 7 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>-->



		<div id="slide7" class="step" data-x="11800">
			<p class="head">1. Objekt</p>
			<p class= "headline">Objekt-Literal</p>
			<pre class="prettyprint lang-javascript">
var obj = {
   eigenschaft : "Property",
   methode : function(){
      console.log("Methode");},
   verschachtelt : {
      innere : "innereProperty",
      innereMethode : function(){
         console.log("innereMethode");}}};
			</pre>
			<p class='footer'>Slide 7 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide8" class="step" data-x="13600">
			<p class="head">1. Objekt</p>
			<p class= "headline">Zugriff Teil 1</p>
			<pre class="prettyprint lang-javascript">
console.log(obj.eigenschaft); //Property
obj.methode(); //Methode
console.log(obj.verschachtelt.innere);
//innereProperty
obj.verschachtelt.innereMethode();
//innereMethode
</pre>
			<p class='footer'>Slide 8 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide9" class="step" data-x="15400">
			<p class="head">1. Objekt</p>
			<p class= "headline">Zugriff Teil 2</p>
			<pre class="prettyprint lang-javascript">
console.log(obj["eigenschaft"]); 
//Property
obj["methode"](); //Methode
console.log(obj["verschachtelt"]["innere"]);
//innereProperty
obj["verschachtelt"]["innereMethode"]();
//innereMethode
</pre>
			<p class='footer'>Slide 9 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<!-- <div id="slide10" class="step" data-x="17200">
			<p class="head">1. Objekt</p>
			<p class= "headline">Erweiterung</p>
			<pre class="prettyprint lang-javascript">
//Object
obj.neuEigenschaft = "new property";

//Objektliterale
obj.verschachtelt.neuEigenschaft = 
                         "new property";
			</pre>
			<p class='footer'>Slide 11 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div> -->




		<div id="slide11" class="step" data-x="17200" data-y="1800" data-rotate="90">
			<p class="head">2. Konstruktorfunktion</p>
			1. Konstruktorfunktion</br>
			2. Globale</br>
			3. Private</br>
			4. Public</br>
			5. constructor Eigenschaft
			&emsp;</br>
			<p class='footer'>Slide 10 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide12" class="step" data-x="17200" data-y="3600">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Konstruktorfunktion</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "property";
   this.methode = function(){
      console.log("methode");}}
var obj = new konstruktor();
console.log("obj.eigenschaft");//property
obj.methode();//methode
			</pre>
			<p class='footer'>Slide 11 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide13" class="step" data-x="17200" data-y="5400">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Erzeugen</p>
			<pre class="prettyprint lang-javascript">
var konstruktor = function(){
   //TODO
};
function konstruktor(){
   //TODO
}
function konstructor(){}
var konstruktor = function(){};
//spaeter erweitern
			</pre>
			<p class='footer'>Slide 12 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide14" class="step" data-x="17200" data-y="7200">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Global</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   eigenschaft = "Global";
   methode = function(){
      console.log("Global");}}
console.log(eigenschaft);//Global
console.log(window.eigenschaft);//Global
methode();//Global
window.methode();//Global
obj = new konstruktor();
console.log(obj.eigenschaft);//undefine
			</pre>
			<p class='footer'>Slide 13 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide15" class="step" data-x="17200" data-y="9000">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Private</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   var eigenschaft = "Private";
   var methode = function(){
      console.log("Private");}
   //oder
   function methode2(){
      console.log("Private");}}
var obj = new konstruktor();
console.log(obj.eigenschaft); //undefine
obj.methode(); //undefine
obj.methode2(); //undefine
			</pre>
			<p class='footer'>Slide 14 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide16" class="step" data-x="17200" data-y="10800">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Public</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "Public";
   this.methode = function(){
      console.log("Public");
   }
}
var obj = new konstruktor();
console.log(obj.eigenschaft); //Public
obj.methode(); //Public
			</pre>
			<p class='footer'>Slide 15 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide17" class="step" data-x="17200" data-y="12400">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Objekt-Erweiterung</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "Public";
   this.methode = function(){
      console.log("Public");}}
var obj = new konstruktor();
var obj2 = new konstruktor();
obj.neuEigenschaft = "NEU";
console.log(obj.neuEigenschaft);//NEU
console.log(obj2.neuEigenschaft);//undefine
console.log(obj2.eigenschaft);//Public
			</pre>
			<p class='footer'>Slide 16 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide18" class="step" data-x="17200" data-y="14200">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Prototyp-Erweiterung</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "Public";
   this.methode = function(){
      console.log("Public");}}
konstruktor.prototype.a = "NEU";
var obj = new konstruktor();
var obj2 = new konstruktor();
console.log(obj.a);//NEU
console.log(obj2.a);//NEU
			</pre>
			<p class='footer'>Slide 17 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide19" class="step" data-x="17200" data-y="16000">
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">constructor</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.constructor.count++;
}
konstruktor.count = 0;
var obj_1 = new konstruktor();
var obj_2 = new konstruktor();
var obj_3 = new konstruktor();
console.log(konstruktor.count);//3
			</pre>
			<p class='footer'>Slide 18 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<!-- <div id="slide19" class="step" data-x="17200" data-y="16000" >
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">constructor</p>
			<pre class="prettyprint lang-javascript">
obj_1.a = "etwas anderes";
console.log(obj_1.a);// etwas anderes
console.log(konstruktor.constructor.a);
// Property
			</pre>
			<p class='footer'>Slide 20 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div> -->
		
		
		
		<div id="slide20" class="step" data-x="17200" data-y="17800" data-rotate="90" >
			<p class="head">3. Prototyp</p>
			1. __proto__</br>
			2. Prototyp-Kette</br>
			3. Prototyp-Vererbung</br>
			4. Frameworks
			<p class='footer'>Slide 19 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<!--<div id="slide21" class="step" data-x='32400' data-y='6800' date-z='5000'>
			<p class="head">3. Vererbung</p>
			<p class= "headline">Prototyp in Technik </p>
			Ein Prototyp stellt in der Technik ein f&uumlr die jeweiligen
			Zwecke funktionsf&aumlhiges, oft aber auch vereinfachtes 
			Versuchsmodell eines geplanten Produktes oder Bauteils dar.
			(Wikipedia)
			
			<pre class="prettyprint lang-javascript">
function Mann(){
   this.geschlecht = "männlich";
   this.print = function(){
      console.log(geschlecht);
   }
}
			</pre>
			<p class='footer'>Slide 22 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>-->
		
		
		
		<div id="slide21" class="step" data-x="19000" data-y="19600" data-z="1800">
			<p class="head">3. Prototyp</p>
			<p class= "headline">__proto__</p>
			<pre class="prettyprint lang-javascript">
var foo = {
   x : 10,
   y : 20
}
			</pre>
			<div  valign="middle" align="center">
				<img src="img/basic-object.png" >
			</div>
			</br>
			<div class="imgQuelle">[Aus: http://molily.de/javascript-core]</div>
			<p class='footer'>Slide 20 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide22" class="step" data-x="20800" data-y="21400" data-z="3600">
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Kette</p>
			<pre class="prettyprint lang-javascript">
var a = {x: 10,
  calculate: function (z) {
    return this.x + this.y + z}};
var b = {y: 20, __proto__: a};
var c = {y: 30, __proto__: a};
b.calculate(30); // 60
c.calculate(40); // 80
			</pre>
			<p class='footer'>Slide 21 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide23" class="step" data-x="22600" data-y="23200" data-z="5400">
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Kette</p>
			<div valign="middle" align="center">
				<img src="img/prototype-chain.png" >
			</div>
			</br>
			<div class="imgQuelle">[Aus: http://molily.de/javascript-core]</div>
			<p class='footer'>Slide 22 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide24" class="step" data-x="24400" data-y="25000" data-z="7200">
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Kette</p>
			<pre class="prettyprint lang-javascript">
function Foo(y) {this.y = y;}
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
   this.x + this.y + z;
};
var b = new Foo(20);
var c = new Foo(30);
b.calculate(30); // 60
c.calculate(40); // 80
			</pre>
			<p class='footer'>Slide 23 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
	
	
	
		<div id="slide26" class="step" data-x="26200" data-y="26800" data-z="9000">
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Kette</p>
			<div valign="middle" align="center">
				<img src="img/constructor-proto-chain.png" >
			</div>
			</br>
			<div class="imgQuelle">[Aus: http://molily.de/javascript-core]</div>
			<p class='footer'>Slide 24 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		
		<div id="slide25" class="step" data-x='28000' data-y='28600' data-z='10800'>
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Kette</p>
			<pre class="prettyprint lang-javascript">
console.log(
   b.__proto__ === Foo.prototype, // true
   c.__proto__ === Foo.prototype, // true
   b.constructor === Foo, // true
   c.constructor === Foo, // true
   <!-- Foo.prototype.constructor === 
      Foo // true
   b.calculate === 
      b.__proto__.calculate, // true
   b.__proto__.calculate === 
      Foo.prototype.calculate // true -->
);
			</pre>
			<p class='footer'>Slide 25 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide27" class="step" data-x='29800' data-y='30400' data-z='12400'>
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Vererbung</p>
			<pre class="prettyprint lang-javascript">
Object.prototype.clone = function(extension) {
   function fakeConstructor() {};
   fakeConstructor.prototype = this;
   var obj = new fakeConstructor();
   for (field in extension) {
      obj[field] = extension[field];
   }
   return obj;
}
			</pre>
			<p class='footer'>Slide 26 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide28" class="step" data-x='31600' data-y='32200' data-z='14200'>
			<p class="head">3. Prototyp</p>
			<p class= "headline">Prototyp-Vererbung</p>
			<pre class="prettyprint lang-javascript">
var a = {x: 5};
var b = a.clone({y: 6});
var c = b.clone({z: 7});
alert(b.x); // 5
alert(b.y); // 6
alert(c.x); // 5
alert(b.z); // undefined
			</pre>
			<p class='footer'>Slide 27 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide29" class="step" data-x='33400' data-y='34000' data-z='16000'>
			<p class="head">3. Prototyp</p>
			<p class= "headline">Frameworks</p>
			- MooTools</br>
			- Prototype
			<p class='footer'>Slide 28 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		<div id="slide30" class="step" data-x='35200' data-y='35800' data-z='17800'>
			<p class="head">Quellen</p>
			1. http://molily.de/javascript-core</br>
			2. http://www.peterkropff.de/site/javascript/einbindung.htm</br>
			3. http://www.brain-dump.org/docs/oop-in-js/</br>
			4. http://www.documentroot.net/allgemein/js-tutorial-klassen-prototypen-oop</br>
			Letzte Zugriff auf alle Webseiten war am 6.04.2014
			<p class='footer'>Slide 29 von 29 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
	</div>
	
	<script type="text/javascript" src="js/run-prettify.js"></script>
	<script type="text/javascript" src="js/impress.js"></script>
	<script type="text/javascript">impress().init();</script>
	
</body>
</html>